<template>
  <div>
    <!-- 增加物品 -->
    <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" label-position="right">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称：" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格：" prop="spec">
            <el-input v-model="ruleForm.spec" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="打印名称：">
            <el-input v-model="ruleForm.printName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位：" prop="unit">
            <el-select v-model="ruleForm.unit" placeholder="请选择单位" class="el-select-y">
              <el-option label="个" value="个" />
              <el-option label="袋" value="袋" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 系统自动生成 -->
          <el-form-item label="拼音码：">
            <span>系统自动生成</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物品售价：">
            <el-input v-model="ruleForm.sellPrice" oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="物品分类：" prop="productClassification">
            <el-cascader style="width:100%" placeholder="请选择物品分类" :options="optionsWithDisabled" :props="propsOption" :value="ruleForm.productClassification" class="el-select-y" @change="classificationContent" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家：">
            <el-input v-model="ruleForm.producerName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="批准文号：">
            <el-input v-model="ruleForm.licenseNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产地：">
            <el-input v-model="ruleForm.productAddress" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="注册文号：">
            <el-input v-model="ruleForm.registrationNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 库存低于下限时将发出提示 -->
          <el-form-item label="库存下限：">
            <el-input v-model="ruleForm.inventoryFloor" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态：">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="上架" />
              <el-radio label="下架" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item>
        <el-button class="submit" @click="submitForm()">保存</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕',
      }],
      ruleForm: {
        name: '',
        type: "物品",
        status: "上架",
      },
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入物品名称', trigger: 'blur' },
        ],
        // spec: [
        //   { required: true, message: '请输入规格名称', trigger: 'blur' },
        // ],
        // unit: [
        //   { required: true, message: '请选择单位', trigger: 'blur' },
        // ],
        // productClassification: [
        //   { required: true, message: '请输入规格名称', trigger: 'blur' },
        // ],
      },
      optionsWithDisabled: [],
      propsOption: {
        value: 'id',
        label: 'dataName',
        checkStrictly: true,
      },
    };
  },
  watch: {
    row: {
      handler(val) {
        console.log(val);
        if (val && this.row.id) {
          this.ruleForm = this.row;
        }
      },
      immediate: true, // 立即触发
    },
  },
  mounted() {
    this.getType();
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        const pinyinCode = this.$pinyin(this.ruleForm.name, { style: this.$pinyin.STYLE_NORMAL, heteronym: true });
        this.ruleForm.searchCode = "";
        pinyinCode.forEach(item => {
          this.ruleForm.searchCode += item;
        });
        this.loading = true;
        if (this.row.id) {
          this.$api['data/goods/update']({
            ...this.ruleForm,
          }).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('修改物品成功');
          });
        } else {
          this.$api['data/goods/create']({
            ...this.ruleForm,
          }).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('增加物品成功');
          }).finally(() => (this.loading = false));
        }
      });
      this.getType();
    },
    getType() {
      this.loading = true;
      this.$api['data/goods/treeList']({
        // ...this.queryParams,
        dataType: '物品类',
      }).then(res => {
        if (res.code !== 200) return;
        this.optionsWithDisabled = res.data;
        // this.total = res.data.total;
      }).finally(() => (this.loading = false));
    },
    classificationContent(val) {
      const content = [];
      let list = JSON.parse(JSON.stringify(this.optionsWithDisabled));
      val.forEach(id => {
        const item = this.getClassificationContent(id, list);
        content.push(item.name);
        list = item.list;
      });
      this.ruleForm.productClassificationName = content.join("/");
      this.ruleForm.productClassificationId = val[val.length - 1];
      this.ruleForm.allProductClassificationId = val.join(",");
      // this.ruleForm.productClassificationId = val[val.length - 1];
    },
    getClassificationContent(id, list) {
      const json = {};
      list.forEach(item => {
        if (item.id === id) {
          json.name = item.dataName;
          json.list = item.children;
        }
      });
      return json;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>

